<template>
  <view class="content">
    <u-sticky style="background: #fff;">
      <topbar title='模板文件' :userInfo="userInfo" @success="successHandel" :mindMapType="false" :showMore="false" />
      <u-tabs :current="current" :list="list" lineWidth="30" lineColor="#4C75FF" :scrollable="false" :activeStyle="{
        color: '#4C75FF'
      }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="changeHandel" />

    </u-sticky>

    <swiper class="swiper" :current="current" @animationfinish="animationfinish">
      <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">



        <scroll-view style="height: 100%;" scroll-y="true" class="scroll-Y">
          <u-cell-group>
            <u-cell size="large" v-for="(item2, index2) in swiperList" :key="index2" :title="item2.name"
              :label="item2.createTime" @click.stop="deteleHandel(item2)">
              <u-icon slot="icon" size="40" name="file-text" color="#4C75FF"></u-icon>
            </u-cell>
          </u-cell-group>



        </scroll-view>

        <u-empty v-if="swiperList.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
          text="暂时没有数据" textSize="18" />




      </swiper-item>
    </swiper>

    <u-empty marginTop="100" icon="http://cdn.uviewui.com/uview/empty/permission.png" text="您还未登录，登录后享受更多精彩~"
      :show="!isLogin" textColor="#191F25" textSize="18">
      <slot>
        <u-button type="primary" text="登录" @click="loginHandel()"></u-button>
      </slot>

    </u-empty>






    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { getTempList, getUserInfo } from '@/api/api.js'
export default {
  data() {
    return {
      list: [{
        name: '流程图',
        label: '2'
      }, {
        name: '思维导图',
        label: '1'
      }, {
        name: '思维笔记',
        label: '3'
      }],
      current: 0,
      swiperList: [],
      isLogin: uni.getStorageSync("TOKEN") !== '',
      userInfo: {},
      typeId: "1",
      show: false,
      fileName: '',
      fileObj: {},
      showModal: false,
    };
  },
  onShow() {
    this.current = 0
    getUserInfo().then(res => {
      this.userInfo = res.data
    })
    this.getModelTem({ typeId: this.typeId })
  },
  methods: {
    loginHandel() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    changeHandel(item) {
      this.current = item.index
      this.getModelTem({ typeId: item.label })
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.getModelTem({ typeId: this.list[e.detail.current].label })
    },
    preview() {
      uni.navigateTo({
        url: `/pages/index/detail/detail?fileId=${this.fileObj.fileId}`,
      });
      this.show = false
    },
    getModelTem(args) {
      getTempList(args).then(res => {
        this.swiperList = res.data.rows
      })
    },
    deteleHandel(e) {
      uni.navigateTo({
        url: `/pages/index/detail/detail?fileId=${e.fileId}`,
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.swiper {
  height: 100vh;
}

.swiper-item {
  height: 100%;
}

::v-deep .u-button {
  margin-top: 50rpx;
  width: 200px !important;
  border-radius: 50rpx !important;
  background-color: #4C75FF !important;

  .u-button__text {
    font-size: 18px !important;
  }
}
</style>